<template>
  <el-dialog
    :model-value="isShow"
    :title="editRoleUserParams.id === 0 ? '添加角色' : '编辑角色'"
    @close="closeFn"
  >
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入角色名称"
        />
      </el-form-item>
      <el-form-item
        label="描述"
        :label-width="formLabelWidth"
        prop="description"
      >
        <el-input
          v-model="form.description"
          type="textarea"
          placeholder="请输入描述"
          :rows="3"
        />
      </el-form-item>
      <el-form-item
        label="是否启用"
        :label-width="formLabelWidth"
        prop="statue"
      >
        <el-radio-group v-model="form.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('defaultFn')">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ApiRoleCreate, ApiRoleUpdateInfo } from '../api'

interface IProps {
  isShow: boolean
  editRoleUserParams: {
    id?: number
    name?: string
    description?: string
    status?: number
  }
}
const props = withDefaults(defineProps<IProps>(), {
  isShow: false,
  editRoleUserParams: () => ({
    id: 0,
    name: '',
    description: '',
    status: 1,
  }),
})

const emit = defineEmits(['defaultFn'])

// 请求数据
const form = reactive<IRoleListData>({
  description: '',
  name: '',
  status: 1,
  adminCount: 0,
  id: 0,
  sort: 0,
})

// 表单规则
const rules = {
  description: [{ trigger: 'blur' }],
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  statue: [{ trigger: 'change' }],
}

const formLabelWidth = '140px'

const formRef = ref<FormInstance>()

// 对话框关闭事件
const closeFn = () => {
  // formRef.value?.resetFields()
  form.name = ''
  form.description = ''
  form.status = 1
  emit('defaultFn')
}

watch(
  () => props.editRoleUserParams.id,
  () => {
    if (props.editRoleUserParams.id !== 0) {
      Object.assign(form, props.editRoleUserParams)
    }
  },
)

// 添加按钮
const addButton = () => {
  // 提交表单前再次确认
  ElMessageBox.confirm('此操作将添加角色信息, 是否继续?', '提示', {
    confirmButtonText: '确实',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ApiRoleCreate(form).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '添加成功！',
          })
          closeFn()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'success',
        message: '您已取消',
      })
    })
}

// 编辑按钮
const editButton = () => {
  // 提交表单前再次确认
  ElMessageBox.confirm('此操作将添加角色信息, 是否继续?', '提示', {
    confirmButtonText: '确实',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ApiRoleUpdateInfo(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success('修改成功！')
          emit('defaultFn', true)
          formRef.value?.resetFields()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'success',
        message: '您已取消',
      })
    })
}

// 提交按钮
const submit = () => {
  // 校验表单
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return ElMessage.warning('请填写名称！')

    if (props.editRoleUserParams.id === 0) {
      addButton()
    } else {
      editButton()
    }
  })
}
</script>


<style lang="less" scoped></style>
